<template>
    <div>
      <el-row>
        <el-form ref="form" v-model="info"  label-width="80px">
          <el-form-item label="本机Mac">
            <el-input v-model="info.mac"></el-input>
          </el-form-item>
          <el-form-item label="晶格序号">
            <el-input v-model="info.gridMapIndex"></el-input>
          </el-form-item>
          <el-form-item label="本机id">
            <el-input v-model="info.id"></el-input>
          </el-form-item>
          <el-form-item label="开始">
            <el-switch
              v-model="start"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
        </el-form>
        <canvas id="c"></canvas>
      </el-row>

      <el-row>

      </el-row>
    </div>
</template>
<script>
    export default {
        name: "CollectionClient",
        data(){
          return {
            start:false,
            info:{
              mac:"",
              id:"",
              gridMapIndex:0
            },
            canvasParams:{
              width:1800,
              height:300,
              canvas:''
            },
            gridMap:{
              left:0.0,
              right:0.0,
              top:0.0,
              buttom:0.0,
              k:1
            },
          };
      },
        methods:{
          buildGridMap(){
            var that = this
            that.canvasParams.canvas = new fabric.Canvas(document.getElementById("c"),{selection:false,width:that.canvasParams.width,height:that.canvasParams.height})
            // that.canvasParams.canvas.add(new fabric.Rect({
            //   left:10,
            //   top:10,
            //   width:50,
            //   height:50,
            //   fill:'red',//填充的颜色
            // }))
            this.$axios.get("location/getGridMapData").then(function (result) {
              var gridmap = result.data
              if (gridmap.gridNum == 0){
                that.show.girdmap == true
                return
              }
              that.gridMap.top = gridmap.y[0]-gridmap.height[0]/2
              that.gridMap.left = gridmap.x[0]-gridmap.width[0]/2
              that.gridMap.buttom = gridmap.y[0]+gridmap.height[0]/2
              that.gridMap.right = gridmap.x[0]+gridmap.width[0]/2
              for (var i=1;i<gridmap.gridNum;i++){
                that.gridMap.top = that.gridMap.top<(gridmap.y[i]-gridmap.height[i]/2)?that.gridMap.top:(gridmap.y[i]-gridmap.height[i]/2)
                that.gridMap.left = that.gridMap.left<(gridmap.x[i]-gridmap.width[i]/2)?that.gridMap.left:(gridmap.x[i]-gridmap.width[i]/2)
                that.gridMap.buttom = that.gridMap.buttom>(gridmap.y[i]+gridmap.height[i]/2)?that.gridMap.buttom:(gridmap.y[i]+gridmap.height[i]/2)
                that.gridMap.right = that.gridMap.right>(gridmap.x[i]+gridmap.width[i]/2)?that.gridMap.right:(gridmap.x[i]+gridmap.width[i]/2)
              }

              let a = that.canvasParams.width/(that.gridMap.right-that.gridMap.left)
              let b = that.canvasParams.height/(that.gridMap.buttom-that.gridMap.top)
              that.gridMap.k = a>b?b:a;a
              let k = that.gridMap.k
              var GridRect = fabric.util.createClass(fabric.Rect,{
                type:'GridRect',
                selectedGrid:false,
                //width height
                initialize: function(options) {
                  options || (options = { });
                  options.selectable = false
                  this.callSuper('initialize', options);
                  this.set('label', options.label || '');
                },
                toObject: function() {
                  return fabric.util.object.extend(this.callSuper('toObject'), {
                    label: this.get('label')
                  });
                },

                _render: function(ctx) {
                  this.callSuper('_render', ctx);
                  ctx.font = '10px Helvetica';
                  ctx.fillStyle = '#333';
                  ctx.fillText(this.label, -this.width/2, -this.height/2+10);
                }
              })
              for (var i = 0;i<gridmap.gridNum;i++){
                let left = (gridmap.x[i]-gridmap.width[i]/2)*k;
                let top = (gridmap.y[i] - gridmap.height[i]/2)*k;
                let width = (gridmap.width[i])*k;
                let height = (gridmap.height[i])*k;

                that.canvasParams.canvas.add(new GridRect({
                  left:left,
                  top:top,
                  width:width,
                  height:height,
                  fill:'rgba(255, 255, 255, 0)',//填充的颜色
                  stroke: 'green',
                  strokeDashArray:[1,2],
                  strokeWidth: 1,
                  label:(i+1),
                  selectable:false
                }))
              }
            })
            this.canvasParams.canvas.on('mouse:dblclick', function(options) {//选中监听事件
              var objects = that.canvasParams.canvas.getObjects();
              for (var i = objects.length - 1; i >= 0; i--) {
                var object = objects[i];
                //判断该对象是否在鼠标点击处
                if (that.canvasParams.canvas.containsPoint(event, object) && object.__proto__.type == 'GridRect') {
                  //选中该对象
                  if (object.selectedGrid == false){
                    object.selectedGrid = true
                    object.set("fill", 'red');
                    alert(object.label+"   selected")
                  }else {
                    object.selectedGrid = false
                    object.set("fill", 'rgba(255, 255, 255, 0)');

                    alert(object.label+"   "+"no selected")
                  }
                  that.canvasParams.canvas.renderAll()
                }
              }
            });
          },
        },
        mounted() {
        this.buildGridMap()
      }
    }
</script>

<style scoped>

</style>
